<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-19 17:05:01
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-05 16:35:53
 * @FilePath: \dcy-webd:\webCode\dcyCode\scientific_research_manager_web\src\views\system\dict\data\index.vue
 * @Description: 字典数据
-->
<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus'
import { dictionaryPageDataApi, updateDataStatusApi } from "@/api/system/dict/index"
import DataModal from '../components/DataModal.vue'

const query = computed(() => useRoute()?.query || {})

const dataList = ref([])
const total = ref(0)
const title = ref("");
const visible = ref(false);
const dataId = ref('') // 当前行id
const curItem = ref() // 当前字典信息


const queryParams = ref<any>({
  page: 1,
  size: 20,
  dictionaryId: query.value.id,
  dictionaryName: '',
})
// 搜索条件组件配置数据
const conditionComponents = ref([
  {
    type: 0,
    key: 'dictionaryName',
    width: "220px",
    placeholder: '请输入字典数据名称'
  },
])
// 表头
const columns = ref([
  {
    title: '序号',
    width: 70,
    dataIndex: 'key',
    formatter: (_row: any, _column: any, _cellValue: any, index: number) => {
      return index + 1
    }
  },
  {
    title: '字典名称',
    minWidth: 360,
    dataIndex: 'dictionaryName',
    formatter: () => {
      return query.value?.name
    }
  },
  {
    title: '字典数据名称',
    minWidth: 360,
    dataIndex: 'name',
  },
  {
    title: '是否启用',
    minWidth: 100,
    dataIndex: 'status',
    slotName: 'status',
  },
  {
    title: '字典备注',
    minWidth: 360,
    dataIndex: 'dataRemark',
  },
  {
    title: '操作',
    minWidth: 80,
    dataIndex: 'default',
    slotName: 'default',
  }
])

// 列表查询
const { run: dictionaryPage, loading } = useRequest(dictionaryPageDataApi, {
  manual: true,
  onSuccess: (res: any) => {
    dataList.value = res?.content || []
    total.value = res.totalElements
  }
})

// 用户禁用启用
const { run: updateDataStatus, loading: switchLoading } = useRequest(updateDataStatusApi, {
  manual: true,
  onSuccess: () => {
    let text = curItem.value.status === 1 ? "启用" : "禁用"
    ElMessage({
        message: `${text}成功`,
        type: 'success',
    })
    onSearch()
  }
})
function statusChange(item) {
  curItem.value = item
  updateDataStatus({status: item.status, id: item.id})
}


/** 新增按钮操作 */
const handleAdd = () => {
  dataId.value = ''
  curItem.value = ''
  title.value = "添加字典数据"
  visible.value = true
}

/** 修改按钮操作 */
const handleUpdate = (row) => {
  dataId.value = row.id
  curItem.value = row
  title.value = "编辑字典数据"
  visible.value = true
}

const handleCancel = (isUpdate = false) => {
  visible.value = false
  if (isUpdate) {
    onSearch()
  }
}

onSearch()

// 过滤查询
function onSearch() {
  dictionaryPage(queryParams.value)
}
// 条件过滤
function formSearch(params){
  queryParams.value = {
    ...queryParams.value,
    ...params,
  }
  onSearch()
}
</script>
<template>
  <div class="app-container">
    <SearchBar :components="conditionComponents" @search="formSearch" class="mb-[16px]" >
      <template #rightArea>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </template>
    </SearchBar>
    <TableForm :auto-height="true" :data="dataList" :columns="columns"
      :tableLoading="loading" :total-count="total" :showToolBar="false"
      @refresh="formSearch">
      <template #status="{record}">
        <el-switch
          v-model="record.status"
          :active-value="1"
          :inactive-value="2"
          :loading="switchLoading"
          @click="statusChange(record)"
        ></el-switch>
      </template>
      <template #default="{ record }">
        <el-button link type="primary" @click="handleUpdate(record)">编辑</el-button>
      </template>
    </TableForm>

    <!-- 添加或修改参数配置对话框 -->
    <DataModal v-if="visible" :visible="visible" :id="dataId" :name="query?.name" :curItem="curItem" :title="title" @cancel="handleCancel" />
  </div>
</template>
